<template>
    <div class="incomeTracking">
        <div class="contentTopTitle">
            <div class="fl">
                <div class="title">季度考核</div>
            </div>
        </div>
        <div class="content" style="margin-top:3px">
            <div class="fenqy">
                <div class="operation">
                    <el-form
                        :inline="true"
                        :model="form"
                        label-width="80px"
                        class="formList"
                    >
                        <el-form-item label="选择区域">
                            <dx-cascader
                                :area_id.sync="form.areaId"
                                ref="cascader"
                                :maxLevel="2"
                            />
                            <!-- <el-select v-model="form.areaId" placeholder="选择区域" @change="areaChange($event)">
            <el-option
              v-for="item in areaList"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
            ></el-option>
              </el-select>-->
                        </el-form-item>
                        <el-form-item label="账期">
                            <el-date-picker
                                v-model="form.month"
                                value-format="yyyyMM"
                                type="month"
                                placeholder="选择月"
                            ></el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                size="small"
                                type="primary"
                                @click="submitHandle"
                                >查询</el-button
                            >
                            <el-upload style="display: inline-block; margin: 0 10px;"
                                class="upload-demo"
                                action="/api/check/importData"
                                :limit="1"
                                :data="params"
                                :on-success="importTarget"
                                :on-progress="progress"
                                :on-error="errorUpload"
                                :show-file-list="false"
                            >
                                <el-button size="small" type="orange"
                                    >导入</el-button
                                >
                            </el-upload>
                            <el-button
                                size="small"
                                type="primary"
                                @click="exportExcel()"
                                >导出</el-button
                            >
                        </el-form-item>
                        <!-- <el-form-item class="export" style="width: 340px;">
                            <el-upload
                                class="upload-demo"
                                action="/api/check/importData"
                                :limit="1"
                                :data="params"
                                :on-success="importTarget"
                                :on-progress="progress"
                                :on-error="errorUpload"
                                :show-file-list="false"
                            >
                                <el-button size="small" type="orange"
                                    >导入</el-button
                                >
                            </el-upload>
                            <el-button
                                size="small"
                                type="primary"
                                @click="exportExcel()"
                                >导出</el-button
                            >
                        </el-form-item> -->
                    </el-form>
                </div>
                <div style="border-bottom:1px solid #EBEEF5;" class="tableBox">
                    <el-table
                        border
                        stripe
                        v-loading="tableLoading"
                        :data="tableData"
                        style="width: 100%"
                        class="tableTh28"
                        height="65vh"
                        ref="table"
                        :span-method="arraySpanMethod"
                    >
                        <!--    :span-method="arraySpanMethod"     -->
                        <el-table-column
                            fixed
                            label="指标"
                            prop="className"
                            class-name="first-title"
                            min-width="70"
                        ></el-table-column>
                        <el-table-column
                            fixed
                            label="指标"
                            class-name="second-title"
                            prop="indexName"
                            min-width="120px"
                        ></el-table-column>
                        <el-table-column
                            fixed
                            label="指标"
                            class-name="third-title"
                            prop="weight"
                            min-width="50px"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            fixed
                            label="指标"
                            class-name="fourth-title"
                            prop="subIndexName"
                            min-width="120px"
                        ></el-table-column>
                        <!--    label="主营业务收入" -->
                        <el-table-column
                            v-for="(item, index) in titleList"
                            :key="index"
                            :label="item"
                            :prop="index + 'indexValue'"
                            min-width="100px"
                        ></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getSessionStorage } from "@/common/js/storage";
import { getCookie, setCookie } from "@/common/js/cookie";
import { mergeSpan } from "@/utils/mixin.js";
import { $budgetAPI } from "@/api";
import prefixAPI from "@/api/prefixAPI";
export default {
    name: "assessment",
    data() {
        return {
            form: {
                areaId: "",
                month: "",
                startDate: "",
                endDate: ""
            },
            files: "",
            accountInfo: "",
            tableLoading: false,
            tableData: [],
            count: "",
            titleList: [],
            head: ""
        };
    },
    computed: {
        params() {
            let obj = {
                areaId: this.form.areaId
                    ? this.form.areaId
                    : this.accountInfo.areaId,
                acctMonth: this.form.month,
                token: getCookie("token")
            };
            return obj;
        }
    },
    created() {
        this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        this.init();
    },
    methods: {
        // 初始化
        init() {
            this.getMarketMonth();
        },
        getMarketMonth() {
            let areaId = this.form.areaId
                ? this.form.areaId
                : this.accountInfo.areaId;
            let isMonthReport = 1,
                month;
            $budgetAPI.assessmentMonth(
                { areaId: areaId, isMonthReport: isMonthReport },
                res => {
                    if (res || res.code == 0) {
                        this.form.month = res.content;
                        this.getData(areaId, res.content);
                    }
                },
                err => {}
            );
        },
        submitHandle() {
            let areaId = this.form.areaId
                ? this.form.areaId
                : this.accountInfo.areaId;
            let month = this.form.month
                ? this.form.month
                : this.formatDate(new Date());
            this.getData(areaId, month);
        },
        errorUpload(err, file, fileList) {
            console.log(err);
            this.loading.close();
        },
        progress(event, file, fileList) {
            this.loading = this.$loading({
                lock: true,
                text: "正在导入",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)"
            });
        },
        //导入成功的回调
        importTarget(response, file, fileList) {
            this.alertError(response);
            this.loading.close();
            if (response.code == 0) {
                this.$message({
                    type: "success",
                    message: "导入成功"
                });
                let obj = {
                    month: this.form.month,
                    areaId: this.form.areaId
                        ? this.form.areaId
                        : this.accountInfo.areaId
                };
                // this.getReleaseRecordRs(obj);
                // this.form.recordId = response.content;
                // let params = {
                //   areaId: this.form.areaSelect.areaId
                //     ? this.form.areaSelect.areaId
                //     : this.accountInfo.areaId,
                //   testYear: this.form.year,
                //   type: 1,
                // };
                this.getData(obj.areaId, obj.month);
            }
        },
        getData(areaId, month) {
            let that = this;
            this.tableLoading = true;

            // findNewIncomeTrendBySource
            $budgetAPI.assessment(
                {
                    areaId: areaId,
                    acctMonth: month
                },
                res => {
                    this.tableLoading = false;
                    if (res.code === 0) {
                        // that.tableData = [];
                        let content = res.content;
                        that.titleList = content.areaNames;

                        // for(var i = 0; i < content.dataList.length; i++) {
                        //    for (var j = 0; j < content.dataList[i].dataList.length; j++) {
                        //      content.dataList[i][j + 'indexValue'] =  content.dataList[i].dataList[j].indexValue;
                        //    }
                        // }
                        content.dataList.map((it, i) => {
                            if (it.dataList && it.dataList.length) {
                                it.dataList.map((item, index) => {
                                    it[index + "indexValue"] = item.indexValue;
                                });
                            } 
                            console.log(it["0indexValue"], i);
                        });
                        that.tableData = content.dataList;

                        that.spanArr = that.mergeSpan2(res.content.dataList, [
                            "className",
                            "indexName",
                            "weight",
                            "subIndexName"
                        ]);

                        //   that.$nextTick(() => {
                        //   that.$refs.table.doLayout();
                        // });
                    } else {
                        this.alertError(res);
                    }
                },
                err => {
                    this.tableLoading = false;
                }
            );
        },
        mergeSpan2(tableData, arr) {
            let spanArr = new Array(tableData.length);
            for (let m = 0; m < spanArr.length; m++) {
                spanArr[m] = new Array(arr.length);
            }
            arr.forEach((ele, ind) => {
                let pos = null;
                tableData.forEach((item, index, self) => {
                    if (index == 0) {
                        spanArr[index][ind] = {
                            rowspan: 1,
                            colspan: 1
                        };
                        pos = 0;
                    } else {
                        if (
                            item["indexCode"] == "className" ||
                            ele == "indexName"
                        ) {
                        } else if (ele == "indexCode") {
                        }
                        // && item['indexCode'] === self[index - 1]['indexCode']
                        if (ele == "weight") {
                            if (
                                item[ele] === self[index - 1][ele] &&
                                item["indexCode"] ==
                                    self[index - 1]["indexCode"]
                            ) {
                                spanArr[pos][ind].rowspan += 1;
                                spanArr[index][ind] = {
                                    rowspan: 0,
                                    colspan: 0
                                };
                            } else {
                                pos = index;
                                spanArr[index][ind] = {
                                    rowspan: 1,
                                    colspan: 1
                                };
                            }
                        } else {
                            if (item[ele] === self[index - 1][ele]) {
                                spanArr[pos][ind].rowspan += 1;
                                spanArr[index][ind] = {
                                    rowspan: 0,
                                    colspan: 0
                                };
                            } else {
                                pos = index;
                                spanArr[index][ind] = {
                                    rowspan: 1,
                                    colspan: 1
                                };
                            }
                        }
                    }
                });
            });

            tableData.forEach((item, index) => {
                let pos = null;
                arr.forEach((ele, ind, self) => {
                    if (ind == 0 && spanArr[index][ind].rowspan == 1) {
                        spanArr[index][ind].colspan = 1;
                        pos = 0;
                    } else {
                        if (item[ele] == item[self[ind - 1]]) {
                            spanArr[index][pos].colspan += 1;
                            spanArr[index][ind] = {
                                rowspan: 0,
                                colspan: 0
                            };
                        } else {
                            pos = ind;
                        }
                    }
                });
            });
            return spanArr;
        },
        exportModal() {
            let areaId = "";
            if (this.form.areaId) {
                areaId = this.form.areaId;
            } else {
                areaId = this.accountInfo.areaId;
            }
            let month = this.form.month;
            if (process.env.NODE_ENV == "development") {
                window.location.href =
                    prefixAPI.loc +
                    "/api/check/downCheckActualTemplate?areaId=" +
                    areaId +
                    "&acctMonth=" +
                    month +
                    "&token=" +
                    getCookie("token");
            } else if (process.env.NODE_ENV == "production") {
                window.location.href =
                    prefixAPI.hp +
                    "/api/check/downCheckActualTemplate?areaId=" +
                    areaId +
                    "&acctMonth=" +
                    month +
                    "&token=" +
                    getCookie("token");
            }
        },
        //分产品导出
        exportExcel(type) {
            let areaId = "";
            if (this.form.areaId) {
                areaId = this.form.areaId;
            } else {
                areaId = this.accountInfo.areaId;
            }
            let month = this.form.month;
            if (process.env.NODE_ENV == "development") {
                window.location.href =
                    prefixAPI.loc +
                    "/api/check/exportCheckData?areaId=" +
                    areaId +
                    "&acctMonth=" +
                    month +
                    "&token=" +
                    getCookie("token");
            } else if (process.env.NODE_ENV == "production") {
                window.location.href =
                    prefixAPI.hp +
                    "/api/check/exportCheckData?areaId=" +
                    areaId +
                    "&acctMonth=" +
                    month +
                    "&token=" +
                    getCookie("token");
            }
        },
        handleChange(file, fileList) {
            console.log(file, fileList);
            this.files = fileList;
        },
        //获取当前时间
        formatDate: function(value) {
            let date = new Date(value);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? "0" + MM : MM;
            let d = date.getDate();
            d = d < 10 ? "0" + d : d;
            let h = date.getHours();
            h = h < 10 ? "0" + h : h;
            let m = date.getMinutes();
            m = m < 10 ? "0" + m : m;
            let s = date.getSeconds();
            s = s < 10 ? "0" + s : s;
            return y;
        },
        //区域选择 返回ID和name
        areaChange(event) {
            let temp = this.areaList.find(item => {
                return (item.areaId = event);
            });
            this.form.areaName = temp.areaName;
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (
                columnIndex == 0 ||
                columnIndex == 1 ||
                columnIndex == 2 ||
                columnIndex == 3
            ) {
                return this.spanArr[rowIndex][columnIndex];
            }
        }
    }
};
</script>

<style lang="scss">
.export {
    width: 24%;
    text-align: right;
    .upload-demo {
        display: inline-block;
    }
    /deep/ .el-form-item__content {
        width: 300px !important;
    }
}
/deep/ .el-table .cell {
    text-align: center;
}
.incomeTracking {
    .first-title.is-leaf {
        position: relative;
        font-size: 0 !important;
        border-right: 1px solid #d7e5fb !important;
        .cell {
            color: #d7e5fb;
        }
    }
    .second-title.is-leaf {
        position: relative;
        font-size: 0 !important;
        border-right: 1px solid #d7e5fb !important;
        .cell {
            color: #d7e5fb;
        }
    }
    .third-title.is-leaf {
        position: relative;
        font-size: 0 !important;
        border-right: 1px solid #d7e5fb !important;
        .cell {
            color: #d7e5fb;
        }
    }
    .fourth-title.is-leaf {
        overflow: visible;
        .cell {
            transform: translateX(-95%);
            white-space: nowrap;
            overflow: visible;
        }
    }
}
</style>
